<template>
      <div class="breadcrumb">
          <a-breadcrumb separator="/">
            <a-breadcrumb-item v-for="(item,index) in breadList" :key="index">{{item.name}}</a-breadcrumb-item>
          </a-breadcrumb>
      </div>
</template>
<script>
  export default {
    data() {
      return {
        breadList: []
      };
    },
    created(){
    },
    watch: {
      $route(to,from){
        this.getBreadcrumb()
      }
    },
    methods: {
      getBreadcrumb() {
        let matchedList = this.$route.matched.map(item=>{
            return {
              name:item.meta.title || '首页'
            }
        });
       let matchedListInfo = JSON.parse(JSON.stringify(matchedList))
        this.breadList = matchedListInfo
      },
    },
    created(){
      this.getBreadcrumb();
    },
  };
</script>
<style lang="scss" scoped>
  .breadcrumb{
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 10px 20px;
  }
</style>